<template>
    <div class="header">
      <div class="header-left">
        <div class="iconfont headerLeft-icon">&#xe625;</div>
      </div>
      <div class="header-input">
        <div class="header-style">
          <span class="iconfont contentHeader">&#xe639;</span>
          <input class="input-header" placeholder="搜索"/>
        </div>

      </div>
      <div class="header-right">
        <div class="city-right">城市 <span class="iconfont iconRight">&#xe65c;</span></div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "headerHome"
    }
</script>
<style lang="stylus" scoped>
  @import "../../../common/common.styl"
  .header
    display flex
    line-height .85rem
    background $bgColor
    align-items center
    font-size .2rem
    .header-left
      width .85rem
      float left
      text-align center
      .headerLeft-icon
        font-size .2rem
        color: #ffffff
    .header-input
      flex 1
      background #ffffff
      border-radius .1rem
      position relative
      height .6rem
      font-size .1rem
      .header-style
        position relative
        top -0.1rem
        left 0.1rem
        .input-header
          height .4rem
          width 90%
          border none
          outline none
        .contentHeader
          font-size .05rem
          color: #aab2bd
    .header-right
      width 1.4rem
      text-align center
      color #ffffff
      float right


</style>


